<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom05</title>
</head>
<body>
  1. 对dom节点进行操作，主要操作就是获取上级、下级，或者第一个子集，或者是最后一个子集，后期兄弟节点
  2. 通过js创建节点
  3. 通过js添加节点
  <div id="box">
    <div>
      <span>一号</span>
      <span>二号</span>
      <span>三号</span>
    </div>
    <div >
      <span>四号</span>
      <span>五号</span>
      <span>六号</span>
    </div>
    <div>
      <span>7号</span>
      <span>8号</span>
      <span>9号</span>
    </div>
  </div>
  <script>
    var boxDom = document.getElementById("box");
    // 获取它的子集
    console.log(boxDom.children)
    var theSecond = boxDom.children[1];
    for (var item of theSecond.children) {
      console.log(item.innerText)
    }
    // 获取到父级
    console.log(theSecond.parentElement);
    // 获取到dom节点，根据这节点，我们可以做一些关于节点的操作
    console.log(theSecond.firstChild)
    console.log(theSecond.firstElementChild.innerText)
    // 获取到最后一个
    console.log(theSecond.lastChild)
    console.log(theSecond.lastElementChild.innerText)
    // 获取兄弟节点
    console.log(theSecond.nextSibling)
    console.log(theSecond.nextElementSibling.innerHTML)
    // 获取前一个
    console.log(theSecond.previousSibling)
    console.log(theSecond.previousElementSibling.innerHTML)


    /// 通过js可以创建节点
    var imgDom = document.createElement("img");
    imgDom.src = "img1.jpg"
    imgDom.width = 100

    // theSecond.append(imgDom)
    // 插入到当前dom前面插入一个元素
    // theSecond.before(imgDom)
    // theSecond.after(imgDom)
    // 在第一个位置插入,在内部的某一个元素之前插入指定dom
    theSecond.insertBefore(imgDom,theSecond.firstChild)

    // innerHTML
  </script>

</body>
</html>